<template>
  <div class="page-1-container">
      <div class="top-left--wrap" >
        <img class="logo" :src="logo" />
        <img class="square-bg" :src="squareBg" />
      </div>
      <div class="top-right--wrap" >
        <div>关爱儿童</div>
        <div>健康发展</div>
      </div>
      <div class="bottom-left--wrap" >
        <img class="name-pic" :src="namePig" />
        <div class="icon--container">
          <img class="icon" :src="phoneIcon" />
          <img class="icon" :src="menuIcon" />
          <img class="icon" :src="addressIcon" />
        </div>
      </div>
      <div class="bottom-right--wrap" >
        <img class="square-bg" :src="squareBg" />
      </div>
    <div class="carousel">
      <div class="carousel--wrap">
        <carousel-3d autoplay display="6" width="600" height="600" disable3d="true" :animationSpeed="1000">
          <slide :index="index" v-for="(item, index) in slideList " :key=index>
            <img class="slideshow-pic" :src="item" />
          </slide>
        </carousel-3d>
      </div>
    </div>
  </div>
</template>

<script setup>
  import squareBg from '../assets/image/square_bg.png'
  import logo from '../assets/image/page_1/logo.png'
  import namePig from '../assets/image/page_1/page_1_name.png'
  import phoneIcon from '../assets/image/page_1/phoneIcon.png'
  import menuIcon from '../assets/image/page_1/menuIcon.png'
  import addressIcon from '../assets/image/page_1/addressIcon.png'

  import slideshow_1 from '../assets/image/page_1/slideshow-1.png'
  import slideshow_2 from '../assets/image/page_1/slideshow-2.png'
  import slideshow_3 from '../assets/image/page_1/slideshow-3.png'
  import slideshow_4 from '../assets/image/page_1/slideshow-4.png'
  import slideshow_5 from '../assets/image/page_1/slideshow-5.png'
  import slideshow_6 from '../assets/image/page_1/slideshow-6.png'

  import { ref } from 'vue'

  const slideList = ref([slideshow_1, slideshow_2, slideshow_3, slideshow_4, slideshow_5, slideshow_6])

</script>

<style lang="less">
@import "../assets/css/animation.less";


.page-1-container {
    position: relative;
    width: 100%;
    height: 100%;

  .top-left--wrap {
    position: absolute;
    z-index: 10;
    top: -35vw;
    left: -58vw;
    animation: anLeft_58 1s ease;
    .square-bg {
      width: 140vw;
      height: 140vw;
      
    }
    .logo {
      position: absolute;
      width: 33vw;
      height: 27vw;
      top: 45vw;
      left: 65vw;
      z-index: 11;
    }
  }
  .top-right--wrap {
    position: absolute;
    font-size: 5vw;
    line-height: 7vw;
    top: 9vw;
    right: 7vw;
    color: #ff7d05;
    animation: hideShow 1s ease;
  }
  .bottom-left--wrap {
    position: absolute;
    width: 39vw;
    height: 33vw;
    left: 6vw;
    bottom: 11vw;
    animation: anBottom_11 1.5s ease;
    .name-pic {
      width: 100%;
      height:22vw;
    }
    .icon--container {
      display: flex;
      justify-content: space-between;
      margin: 3vw auto 0;
      width: 37vw;
      .icon {
        width: 9vw;
        height: 9vw;
      }
    }
  }
  .bottom-right--wrap {
    position: absolute;
    top: 18vw;
    right: -100vw;
    z-index: 10;
    animation: anRight_100 .5s ease;
    .square-bg {
      width: 120vw;
      height: 120vw;
    } 
  }

  .carousel {
    position: relative;
    width: 70vw;
    height: 130vw;
    overflow: hidden;
    bottom: -43vw;
    right: -51vw;
    transform:rotate(-40deg);
    animation: hideShow 1.5s ease;
    .carousel--wrap {
      position: absolute;
      transform:rotate(40deg);
      width: 140vw;
      height: 134vw;
      bottom: 0vw;
      right: -28vw;
      z-index: 1;
      .slideshow-pic {
        width: 140vw;
        height: 140vw;
      }
    }
  }
  .carousel-3d-container {
    margin-top: 0 !important;
  }
}
</style>